<template>
  <view>
    <view
      class="product-class page100 flex-col"
      :style="{ '--theme': themeColor }"
    >
      <nav-bar title="商品分类" />
      <view class="top flex">
        <u-search
          :clearabled="false"
          :shape="square"
          v-model="keyWord"
          placeholder="请输入分类名称"
          @custom="search()"
          bgColor="#fff"
        />
      </view>
      <scroll-view scroll-y class="flex1 content">
        <view class="list" v-if="list.length > 0">
          <view class="flex self" v-for="(item, index) in list" :key="index">
            <view class="left">
              {{ item.title }}
              <span>(商品数：{{ item.count }})</span></view
            >
            <view class="flex1 flex-end flex">
              <view class="marginRight-50" @click="editSpec(1, item)"
                >编辑</view
              >
              <view @click="deleteClass(item)">删除</view>
            </view>
          </view>
        </view>
        <XhEmpty title="暂无相关分类数据" v-else />
      </scroll-view>
      <view class="footer center" @click="editSpec()">添加分类 </view>
    </view>
    <addClassCom
      :visible.sync="showClass"
      @addsuccess="fetData"
      :editForm="form"
    />
  </view>
</template>
<script>
import { searchClass, deleteClass } from "@/service/api/sp-product/index";
import addClassCom from "@/components/pageComponents/sp-product/add-class";

export default {
  components: {
    addClassCom,
  },
  data() {
    return {
      list: [],
      showClass: false,
      form: {
        title: "",
        parentId: 0,
      },
      keyWord: "",
      rules: {
        title: [
          {
            type: "string",
            required: true,
            message: "请输入分类名称",
            trigger: ["blur", "change"],
          },
          {
            type: "string",
            required: true,
            max: 10,
            message: "超出最大可输入内容",
            trigger: ["blur", "change"],
          },
        ],
      },
      type: 0,
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  mounted() {
    this.fetData();
  },
  methods: {
    editSpec(type, data) {
      this.type = type ? type : 0;
      this.form =
        type == 1
          ? JSON.parse(JSON.stringify(data))
          : { title: "", parentId: 0 };
      this.showClass = true;
    },
    deleteClass(data) {
      uni.showModal({
        content: "是否删除当前分类？",
        success: (res) => {
          if (res.confirm) {
            if (data.count > 0) {
              uni.showModal({
                content: "当前分类已有商品，不可删除分类",
                showCancel: false,
              });
              return;
            }
            deleteClass({ id: data.id }).then((res) => {
              this.fetData();
            });
          }
        },
      });
    },
    search() {
      this.fetData();
    },
    fetData() {
      let { keyWord: title } = this;
      searchClass({ title }).then((res) => {
        this.list = res;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.product-class {
  background-color: #f7f7f7;
  .top {
    padding: 30rpx 24rpx;
    background-color: #fff;
    ::v-deep .u-search {
      height: 80rpx;
      box-shadow: 0px 0px 4px 0px rgba(34, 34, 34, 0.14);
      border-radius: 8rpx;
      padding-right: 24rpx !important;
    }
    ::v-deep .u-search__content {
      padding-left: 24rpx !important;
      padding-right: 0 !important;
    }
    ::v-deep .u-search__content input {
      font-size: 29rpx !important;
      position: relative;
      ::after {
        height: 35rpx;
        position: absolute;
        content: "";
        right: 0;
        width: 1rpx;
        background: #d0d0d0;
        top: calc(50% - 17.5rpx);
      }
    }
    ::v-deep .u-search .u-search__action--active {
      font-size: 29rpx !important;
      color: var(--theme) !important;
    }
  }
  .content {
    padding: 20rpx 30rpx;
    width: calc(100vw - 60rpx) !important;
    .list {
      background-color: #fff;
      padding: 10rpx 25rpx;
      border-radius: 12rpx;
      overflow: hidden;
      .self {
        padding: 30rpx 0;
        font-size: 29rpx;
        color: #888;
        .left {
          span {
            margin-left: 29rpx;
          }
        }
        .marginRight-50 {
          color: #668ce2;
        }
      }
    }
  }
  .footer {
    font-size: 29rpx;
    color: #fff;
    background-color: var(--theme);
    padding: 30rpx 0;
  }
}
</style>